<template>
  <div>
    <a-card :bordered="false">
      <!--  #####################查询条件###################  -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="简称">
                <a-input v-model="queryParam.name" placeholder="" allowClear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商户号">
                <a-input v-model="queryParam.mchId" placeholder="" allowClear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="类型">
                <a-select showSearch optionFilterProp="children" v-model="queryParam.type" :filterOption="filterOption" allowClear>
                  <a-select-option value="1">未满30天</a-select-option>
                  <a-radio-button value="2">条码支付</a-radio-button>
                  <a-radio-button value="3">H5支付</a-radio-button>
                  <a-radio-button value="4">网银充值</a-radio-button>
                  <a-radio-button value="5">代付</a-radio-button>
                  <a-radio-button value="6">满30天未开通</a-radio-button>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="代理商">
                <a-select showSearch optionFilterProp="children" v-model="queryParam.parentCode"
                          :filterOption="filterOption" allowClear>
                  <a-select-option v-for="item in companys" :key="item.code">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="状态">
                <a-select optionFilterProp="children" v-model="queryParam.status" allowClear>
                  <a-select-option value="1">启用</a-select-option>
                  <a-radio-button value="0">禁用</a-radio-button>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons"
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--  #####################操作###################  -->
      <div class="table-operator">
        <a-button v-action:add type="primary" icon="plus" @click="handleAdd()">新建</a-button>
      </div>

      <!--  #####################表格###################  -->
      <s-table ref="table" :columns="columns" :data="loadData">
        <span slot="name" slot-scope="text, record">
          <div>{{text}}</div>
          <div>{{record.fullName}}</div>
        </span>
<!--        <a-tag slot="status" slot-scope="text" :color="text | statusColorFilter">-->
<!--          {{text | statusFilter}}-->
<!--        </a-tag>-->
        <span slot="status" slot-scope="text, record">
          <a-switch v-action:other checked-children="启用" un-checked-children="禁用" @click="openClick(record)" :default-checked="record.status" />
        </span>
        <span slot="yunying" slot-scope="text, record">
          <a-switch v-action:other checked-children="已开通" un-checked-children="未开通" @click="openClick2(record)" :default-checked="record.yunying" />
        </span>
        <a-tag slot="type" slot-scope="text" :color="text | typeColorFilter">
          {{text | typeFilter}}
        </a-tag>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-action:other @click="testEdit(record)">代付</a>
            <a-divider v-action:other type="vertical"/>
            <a v-action:query @click="createdQr(record)">H5测试</a>
            <a-divider v-action:query type="vertical"/>
            <a v-action:edit @click="handleEdit(record)">编辑</a>
            <a-divider v-action:edit type="vertical"/>
            <a v-action:delete @click="handleDel(record)">删除</a>
            <a-divider v-action:other type="vertical"/>
            <a v-action:other @click="handleToReceiver(record)">分账配置</a>
          </template>
        </span>
      </s-table>

      <!--  #####################打开的页面###################  -->
      <edit ref="createModal" :companys="companys" @ok="refresh"/>
      <testEdit ref="testModal" @ok="refresh"/>

      <a-modal
        title="二维码"
        v-model="visible"
        :maskClosable="false"
        footer=""
      >
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-form-item label="金额">
              <a-input v-model="amount"></a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="zhifu()">确定</a-button>
            </a-form-item>

          </a-form>
          <div id="qrcode" ref="qrcode" style="margin-left: 25%"></div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import edit from './storetestEdit'
  import testEdit from './test'
  import QRCode from 'qrcodejs2'
  import { selectAllCompany } from '@/api/system/company'
  import { selectPage, del } from '@/api/shop/storetest'
  import { saveOrUpdate } from '@/api/shop/storetest'

  /**
   * 组件
   */
  const components = { STable, edit, testEdit }

  const columns = [
    {
      title: '商户名称',
      dataIndex: 'name',
      scopedSlots: { customRender: 'name' }
    },
    {
      title: '代理商',
      dataIndex: 'parentCode'
    },
    {
      title: '微信商户号',
      dataIndex: 'mchId'
    },
    {
      title: '超管',
      dataIndex: 'adminStr',
      width: 100
    },
    {
      title: '类型',
      dataIndex: 'type',
      scopedSlots: { customRender: 'type' }
    },
    {
      title: '是否可用',
      dataIndex: 'status',
      scopedSlots: { customRender: 'status' },
      width: 100
    },
    {
      title: '最大收款金额',
      dataIndex: 'maxAmount',
      customRender: (text) => text + ' 元',
      width: 120
    },
    {
      title: '已收款金额',
      dataIndex: 'payAmount',
      customRender: (text) => text + ' 元',
      width: 120
    },
    {
      title: '代付金额',
      dataIndex: 'amount',
      customRender: (text) => text + ' 元',
      width: 120
    },
    {
      title: '最大次数',
      dataIndex: 'maxCount',
      customRender: (text) => text + ' 次',
      width: 120
    },
    {
      title: '已收次数',
      dataIndex: 'payCount',
      customRender: (text) => text + ' 次',
      width: 120
    },
    {
      title: '运营账户',
      dataIndex: 'yunying',
      scopedSlots: { customRender: 'yunying' },
      width: 100
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 180,
      scopedSlots: {
        customRender: 'action'
      }
    }
  ]

  const statusMap = {
    false: {
      status: '#f50',
      text: '禁用'
    },
    true: {
      status: '#108ee9',
      text: '启用'
    }
  }
  const typeMap = {
    1: {
      status: '#108ee9',
      text: '30天刷单账号'
    },
    2: {
      status: '#ff50ed',
      text: '条码支付'
    },
    3: {
      status: '#ff7f40',
      text: 'H5支付'
    },
    4: {
      status: '#96ff76',
      text: '网银充值'
    },
    5: {
      status: '#ff4767',
      text: '代付'
    },
    6: {
      status: 'rgba(42,153,162,0.55)',
      text: '满30天未开通'
    }
  }

  /**
   * 数据
   */
  const data = function () {
    return {
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      columns,
      visible: false,
      amount: '',
      recordId: '',
      companys: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.result
        })
      }
    }
  }

  const created = function () {
    selectAllCompany().then(res => {
      if (res.code === 200) {
        this.companys = res.result
      }
    })
  }

  /**
   * 过滤器
   */
  const filters = {
    // statusFilter (status) {
    //   return statusMap[status].text
    // },
    // statusColorFilter (status) {
    //   return statusMap[status].status
    // },
    typeFilter (status) {
      return typeMap[status].text
    },
    typeColorFilter (status) {
      return typeMap[status].status
    }
  }

  /**
   * 计算属性
   */
  const computed = {}

  /**
   * 侦听器
   */
  const watch = {}

  export default {
    data: data,
    components: components,
    created: created,
    filters: filters,
    computed: computed,
    watch: watch,
    /**
     * 方法
     */
    methods: {
      testEdit (record) {
        this.$refs.testModal.edit(record)
      },
      handleAdd () {
        this.$refs.createModal.add()
      },
      handleEdit (record) {
        this.$refs.createModal.edit(record)
      },
      handleToReceiver (record) {
        this.$router.push({ name: 'receiverManageList', params: { storeId: record.id } })
      },
      refresh () {
        this.$refs.table.refresh()
      },
      handleDel (record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.name} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            // 在这里调用删除接口
            del(record.id).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      filterOption (input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      createdQr (record) {
        this.visible = true
        this.recordId = record.id
        this.amount = ''
        if (document.getElementById('qrcode') != null) {
          document.getElementById('qrcode').innerHTML = ''
        }
      },
      zhifu(record) {
        if (this.amount < 0.1) {
          this.$error({
            title: '错误信息',
            content: '金额不能小于0.1',
          });
        }else {
          this.$nextTick(function () {
            this.qrcode(record)
          })
        }
      },
      qrcode (record) {
        new QRCode('qrcode', {
          width: 232,  // 设置宽度
          height: 232, // 设置高度
          text: this.baseUrl + '/api/h5/' + this.recordId + '/testH5Pay/' + this.amount
        })
      },
      openClick(record){
        const _this = this
        const data={id:record.id}
        if(record.status){
          data.status=false
        }else {
          data.status=true
        }
        saveOrUpdate(data).then(res => {
          _this.$refs.table.refresh()
        })
      },
      openClick2(record){
        const _this = this
        const data={id:record.id}
        if(record.yunying){
          data.yunying=false
        }else {
          data.yunying=true
        }
        saveOrUpdate(data).then(res => {
          _this.$refs.table.refresh()
        })
      },

    }
  }
</script>

<style scoped>

</style>
